<template>
	<view class="content">
		<view class="topBox">
			<view class="top" v-for="item in txt">
				<u-icon :label="item" size="10" name="checkmark-circle-fill" color="#8b0000" labelSize="26rpx"
					labelColor="#333333"></u-icon>
			</view>
		</view>
		<view class="info">
			<h2>{{info.name}}</h2>
			<p>{{info.goods_brief}}</p>
			<view class="price">
				{{ info.retail_price | priceFormat }}
			</view>
		</view>
		<view class="click" @tap="open">
			<view>展示弹出层</view>
			<u-icon size="20" name="arrow-right"></u-icon>
		</view>
		<view class="mask">
			<u-popup :show="show" mode="bottom" @close="open()">
				<view class="content">
					<u-icon size="20" name="close" class="close" @tap="open"></u-icon>
					<view class="top">
						<view class="img">
							<image :src="info.list_pic_url" mode="widthFix"></image>
						</view>
						<view class="txt">
							<p>价格：{{info.retail_price | priceFormat}}</p>
							<p>库存：{{info.goods_number}}</p>
						</view>
					</view>
					<view class="bottom">
						<view class="num">
							数量：
						</view>
						<u-number-box></u-number-box>
					</view>
				</view>
				<!--加入购物车  -->

			</u-popup>
		</view>

		<!-- 商品参数 -->
		<view class="canshu">
			<h2>商品参数</h2>
		</view>
		<!-- 常见问题 -->
		<view class="pro-center">
			<span class="pro-text"></span>
			<h3 class="pro-text-title">常见问题</h3>
		</view>
		<ul class="content">
			<li v-for="item,index in issue">
				<h3>{{item.question}}</h3>
				<p>{{item.answer}}</p>
			</li>
		</ul>
		<!-- 相关产品 -->
		<view class="pro-center">
			<span class="pro-text"></span>
			<h3 class="pro-text-title">相关产品</h3>
		</view>
		<!-- 加入购物车 -->
		<view class="cart">
			<!-- <uni-goods-nav></uni-goods-nav> -->
		</view>
		<!--  -->
		<view class="cd-goods-list">
			<view class="cd-goods-item" v-for="item in gList" :key="item.id" @tap="glist(item.id)">
				<image class="cd-goods-item-img" :src="item.list_pic_url" mode="scaleToFill" />
				<view class="cd-goods-item-name">{{ item.name }}</view>
				<view class="cd-goods-item-price">{{ item.retail_price | priceFormat }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ApiGoodsDetail,
		ApiGoodsRelated
	} from '../../utils/api.js'
	import cdGoodsList from '@/components/cd-goods-list/cd-goods-list.vue';

	export default {
		data() {
			return {
				show: false,
				txt: ["30天无忧退货", "48小时快速退费", "满88元免邮费 "],
				id: "",
				info: [],
				issue: [],
				gList: []
			}
		},
		components: {
			"cd-goods-list": cdGoodsList,
		},
		methods: {
			open() {
				this.show = !this.show
				// console.log(123);
			},
			glist(id) {
				// console.log(id);
				uni.navigateTo({
					url: `../goods/goods?id=${id}`
				})
			}
		},
		async onLoad(e) {
			this.id = e.id
			// console.log("e", e);
			let res = await ApiGoodsDetail(this.id)
			let res2 = await ApiGoodsRelated(this.id)
			console.log("-------", res2.data);
			console.log(res.data);
			let {
				info,
				issue
			} = res.data
			this.info = info
			this.issue = issue
			this.gList = res2.data.goodsList

		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 100rpx;
		background-color: #efefef;
		// height: 100vh;

		.topBox {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 60rpx;
			background-color: #efefef;
		}

		.info {
			background-color: pink;
			background: #fff;
			text-align: center;
			line-height: 80rpx;
			padding: 40rpx 0;
			border-bottom: 2rpx solid #ccc;

			h2 {
				font-weight: normal;
				font-size: 40rpx;
			}

			p {
				font-size: 28rpx;
			}

			.price {
				color: #8b0000;
				font-size: 26rpx;
			}
		}

		.click {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 32rpx;
			margin-bottom: 40rpx;
			background-color: #fff;
			font-size: 28rpx;
		}

		.mask {
			.content {
				height: 600rpx;
				padding: 20rpx;
				background-color: #fff;
				position: relative;

				.close {
					position: absolute;
					right: 20rpx;
				}

				.top {
					display: flex;

					.img {
						width: 200rpx;
						height: 200rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.txt {
						width: 490rpx;
						height: 200rpx;
						padding-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						font-size: 26rpx;
					}
				}

				.bottom {
					.num {
						margin: 40rpx 0;
					}
				}
			}
		}

		.canshu {
			background-color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			padding: 20rpx;

			h2 {
				font-weight: normal;
				font-size: 40rpx;
			}
		}

		// 常见问题
		.pro-center {
			margin-top: 20rpx;
			width: 100%;
			height: 50px;
			position: relative;
			background: #fff;
			font-size: 16px;

			.pro-text {
				width: 50%;
				height: 2px;
				background-color: #ccc;
				position: absolute;
				margin: auto;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
			}

			.pro-text-title {
				width: 30%;
				height: 40px;
				background-color: #fff;
				position: absolute;
				margin: auto;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				line-height: 40px;
				text-align: center;
				font-weight: 500;
				color: #000;
			}
		}

		.content {
			background-color: #fff;
			padding: 0;
			height: 800rpx;

			li {
				list-style: none;

				h3 {
					padding-left: 40rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 32rpx;
					position: relative;
					padding-right: 20rpx;

					&:before {
						content: "";
						width: 4px;
						height: 4px;
						background: darkred;
						border-radius: 50%;
						position: absolute;
						left: 8px;
						top: 50%;
						margin-top: -2px;
					}
				}

				p {
					padding-left: 40rpx;
					padding-right: 20rpx;
				}
			}
		}

		.cart {
			z-index: 99;
			width: 100%;
			position: fixed;
			bottom: 0;
		}

		.cd-goods-list {
			background-color: #fff;
			display: grid;
			grid-template-columns: 1fr 1fr;
			// grid-template-rows: 480rpx 480rpx;
			grid-auto-rows: 480rpx;
			gap: 15rpx;
			padding-bottom: 40rpx;

			.cd-goods-item {
				overflow: hidden;

				// background-color: skyblue;
				.cd-goods-item-img {
					width: 372rpx;
					height: 372rpx;
				}

				.cd-goods-item-name {
					font-size: 28rpx;
					// display: flex;
					// justify-content: center;
					// align-items: center;
					text-align: center;
					overflow: hidden;
					height: 22px;
					width: 70%;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: block;
					margin: 0px auto;
					// background: red;
				}

				.cd-goods-item-price {
					margin-top: 14rpx;
					font-size: 26rpx;
					color: var(--price-color);
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}


	}
</style>
